<script setup lang="tsx">
import { computed, PropType } from 'vue'
import { Dialog } from '@/components/Dialog'
import { dictionaryItemName, dictionaryItemTag } from '@/utils/dictionary.ts'
import { SystemUser } from '@/api/system/user/types'

const props = defineProps({
  modelValue: {
    type: Boolean
  },
  userDetails: {
    type: Object as PropType<SystemUser>
  }
})

const emit = defineEmits(['update:modelValue'])
const dialogVisible = computed({
  get: () => props.modelValue,
  set: (val) => {
    emit('update:modelValue', val)
  }
})
</script>
<template>
  <div>
    <Dialog v-model="dialogVisible" title="用户详情">
      <el-descriptions class="margin-top" :column="2" border>
        <el-descriptions-item align="left">
          <template #label>
            <div class="cell-item"> 用户名称 </div>
          </template>
          {{ props.userDetails.userName }}
        </el-descriptions-item>
        <el-descriptions-item align="left">
          <template #label>
            <div class="cell-item"> 头像 </div>
          </template>
          <el-image
            style="width: 60px; height: 60px"
            :src="props.userDetails.headSculpture"
            fit="fill"
          />
        </el-descriptions-item>
        <el-descriptions-item align="left">
          <template #label>
            <div class="cell-item"> 手机号 </div>
          </template>
          {{ props.userDetails.mobile }}
        </el-descriptions-item>
        <el-descriptions-item align="left">
          <template #label>
            <div class="cell-item"> 登录IP </div>
          </template>
          {{ props.userDetails.loginIp }}
        </el-descriptions-item>
        <el-descriptions-item align="left">
          <template #label>
            <div class="cell-item"> 登录地址 </div>
          </template>
          {{ props.userDetails.loginAddress }}
        </el-descriptions-item>
        <el-descriptions-item align="left">
          <template #label>
            <div class="cell-item"> 用户状态 </div>
          </template>
          <el-tag class="ml-2" :type="dictionaryItemTag('status', props.userDetails.userStatus)">
            {{ dictionaryItemName('status', props.userDetails.userStatus) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item align="left">
          <template #label>
            <div class="cell-item"> 电子邮箱 </div>
          </template>
          {{ props.userDetails.email }}
        </el-descriptions-item>
        <el-descriptions-item align="left">
          <template #label>
            <div class="cell-item"> 真实姓名 </div>
          </template>
          {{ props.userDetails.realName }}
        </el-descriptions-item>
        <el-descriptions-item align="left">
          <template #label>
            <div class="cell-item"> 性别 </div>
          </template>
          <el-tag class="ml-2" :type="dictionaryItemTag('gender', props.userDetails.gender)">
            {{ dictionaryItemName('gender', props.userDetails.gender) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item align="left">
          <template #label>
            <div class="cell-item"> 生日 </div>
          </template>
          {{ props.userDetails.birthday }}
        </el-descriptions-item>
        <el-descriptions-item align="left">
          <template #label>
            <div class="cell-item"> 创建时间 </div>
          </template>
          {{ props.userDetails.createTime }}
        </el-descriptions-item>
        <el-descriptions-item align="left">
          <template #label>
            <div class="cell-item"> 最后登录时间 </div>
          </template>
          {{ props.userDetails.lastLoginTime }}
        </el-descriptions-item>
        <el-descriptions-item align="left">
          <template #label>
            <div class="cell-item"> 个人介绍 </div>
          </template>
          {{ props.userDetails.introduction }}
        </el-descriptions-item>
      </el-descriptions>
    </Dialog>
  </div>
</template>
